<template>
  <div class="article-list">
    <div v-for="(item, index) in createTime" :key="index" class="article-list-item" @click="goArticleDetail(item._id)">
      <img class="avatar-img" :src="item.avatarUrl" />
      <div class="article-desc">
        <text class="author-name">{{ item.nickName }}发布于</text>
        <text class="author-time">{{ item.createTime }}</text>
        <div class="article-subTitle">{{ item.subTitle }}</div>
        <div class="icon-field">
          <span><img src="http://cs-static-assets.oss-cn-beijing.aliyuncs.com/cs_mpVue/pinglun.png">{{ item.commentCount }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data () {
      return {}
    },
    props: ['articleArr'],
    computed: {
      // mpvue支持计算属性，但是不支持filters属性
      createTime () {
        this.articleArr.forEach(element => {
          element.createTime = moment(element.createTime).format('YYYY-MM-DD HH:mm:ss')
        })
        return this.articleArr
      }
    },
    methods: {
      goArticleDetail (articleId) {
        wx.navigateTo({
          url: `/pages/articleDetail/main?articleId=${articleId}`
        })
      }
    }
  }
</script>

<style scoped>
  .article-list {
    padding-top: 35px;
  }
  .article-list-item {
    display: flex;
    padding: 20rpx 0;
    border-top: 1px solid rgb(228, 222, 222);
  }
  .avatar-img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    border: 1px solid rgb(228, 222, 222);
  }
  .article-desc {
    font-size: 14px;
    flex: 1;
  }
  .author-name,
  .author-time {
    color: lightgray;
  }
  .article-subTitle {
    word-break: break-all;
  }
  .icon-field {
    display: flex;
    color: lightgray;
  }
  .icon-field img {
    width: 40rpx;
    height: 40rpx;
    vertical-align: top;
    margin-right: 10rpx;
  }
</style>